<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
        <div>{{counter}}</div>
         <button v-on:click="dianji">点击</button>
         <button v-on:click="increate(2)">每次增加2</button>
          <button  @click="dianji">点击事件</button>
         <!--@keyup.enter  回车键触发事件-->
          <input type="text"  v-model="message" @keyup.enter="submit" />
          <div>会车得到的数据是: <span id="keyValue"></span></div>
  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             counter:0,
              message:"",
        },
        methods:{
           dianji:function(){//点击事件
              console.info("点击按钮被触发");
              this.counter++;
          },
            increate:function(n){  //传参数
                console.info("点击按钮被触发");
                this.counter=this.counter+n;
            },
            submit:function(){
                 var value=this.message;
                 console.info("value:"+value);
                $("#keyValue").text(this.message);
            }
        }
    });

</script>
</body>
</html>